import React, { Component } from 'react'

export default class StateComponent extends Component {
    constructor() {
        super();
        this.state = {
            msg: "jack",
            count: 0
        }
    }
    // react的更新流程props/state改变--render函数重新执行--产生新的DOM树--新旧DOM树进行diff--
    // 计算出差异进行更行--更新到真实的DOM
    render() {
        return (
            <div>
                {this.state.msg} -- <button onClick={this.changeMsg.bind(this)}>修改msg</button>
                <br/>
                {this.state.count} -- <button onClick={this.add.bind(this)}>add</button>
            </div>
        )
    }

    changeMsg() {
        // this.setState异步还是同步情况：
        // 在组件生命周期或React合成事件中，setState是异步；
        // 在setTimeout或者原生dom事件中，setState是同步；
        // this.setState设置成异步的原因：
        // setState设计为异步，可以显著的提升性能；
        // 如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
        // 最好的办法应该是获取到多个更新，之后进行批量更新；
        // 如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；
        // state和props不能保持一致性，会在开发中产生很多的问题；
        // this.setState({
        //     msg: "change"
        // },() => {
        //     // 回调函数中可以拿到最新的值
        //     console.log(this.state.msg);  //change
        // })
        // console.log(this.state.msg);  //jack
        // 同步的情况
        // setTimeout(() => {
        //     this.setState({
        //         msg:"修改"
        //     })
        //     console.log(this.state.msg);  //修改
        // }, 0);
    }

    add() {
        // 最后结果是1，react里面进行了合并
        // this.setState({count:this.state.count+1});
        // this.setState({count:this.state.count+1});
        // this.setState({count:this.state.count+1});

        // 结果是3，原因是react会把所有的回调都执行一遍
        // this.setState((state,prop) => {
        //     return {
        //         count: state.count + 1
        //     }
        // })
        // this.setState((state,prop) => {
        //     return {
        //         count: state.count + 1
        //     }
        // })
        // this.setState((state,prop) => {
        //     return {
        //         count: state.count + 1
        //     }
        // })
    }
}
